<!--
 * @Description: 描述信息
 * @Version: 版本号
 * @Author: xuebao
 * @Date: 2023-12-05 12:08:20
 * @LastEditors: renmengxue
 * @LastEditTime: 2023-12-08 17:55:02
-->
<template>
  <div class="column-detail-page w-75 mx-auto">
    <div class="column-info row mb-4 border-bottom pb-4 align-items-center" v-if="column">
      <div class="col-3 text-center">
        <img :src="column.avatar && column.avatar" :alt="column.title" class="rounded-circle border w-100">
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">{{ column.description }}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
    <button class="btn btn-outline-primary mt-2 mb-5 mx-auto btn-block w-25 d-block" @click="loadMorePage"
      v-if="!isLastPage">
      加载更多
    </button>
  </div>
</template>

<script lang='ts'>
import { defineComponent, onMounted, computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import PostList from '../components/PostList.vue'
import { useStore } from 'vuex'
import { ColumnProps } from '../store'
import { useColumnStore } from '@/store/column'
import { useUserStore } from '@/store/user'
import { usePostStore } from '../store/post'
import useLoadMore from '../hooks/useLoadMore2'
// import { generateFitUrl } from '@/helper'
export default defineComponent({
  name: 'ColumnDetail',
  components: {
    PostList
  },
  setup(props, ctx) {
    const columnStore = useColumnStore()
    const postStore = usePostStore()
    const userStore = useUserStore()
    const store = useStore()
    const route = useRoute()
    const currentId = ref(route.params.id as string)

    onMounted(() => {
      columnStore.fetchColumn(currentId.value)
      // store.dispatch('fetchColumn', currentId.value)
      // store.dispatch('fetchPosts', currentId.value)
      postStore.fetchPosts({ cid: currentId.value })
    })
    watch(() => route.params, (toParams) => {
      // 确保要变化的路径是进入到用户的专栏
      // 判断跳转的ID是否存在
      const jumpId = toParams && toParams.id
      const column = userStore.data?.column
      if (jumpId && column && column === jumpId) {
        // 重新发送请求 在store中有对应的缓存设置

        columnStore.fetchColumn(jumpId)
        postStore.fetchPosts({ cid: jumpId })

        // store.dispatch('fetchPosts', { cid: jumpId })
        currentId.value = toParams.id as string
      }
    })
    const column = computed(() => columnStore.getColumnsById(currentId.value))
    // const list = testPosts.filter(post => post.columnId === currentId)
    // const column = computed(() => {
    //   const selectColumn = store.getters.getColumnById(currentId) as ColumnProps
    //   if (selectColumn) {
    //     generateFitUrl(selectColumn, 100, 100)
    //   }
    //   return selectColumn
    // })
    const list = computed(() => postStore.getPostsByCid(currentId.value))
    const total = computed(() => postStore.getPostsCountByCid(currentId.value))
    const currentPage = computed(() => postStore.getPostCurrentPageByCid(currentId.value))
    const { loadMorePage, isLastPage } = useLoadMore(postStore, 'fetchPosts', { currentPage, total, cid: currentId.value })

    return {
      list,
      column,
      loadMorePage,
      isLastPage

    }
  }
})

</script>

<style scoped></style>
